<template>
  <div>
    <my-search
      :layout="formItems"
      :model="searchModel"
      :form-conf="searchConf"
      class="myLayoutTop mySearch"
      @btnClick="mySearchBtnClick"
    ></my-search>
    <my-table
      :data="tableData"
      :columns="tableColumns"
      :opt-conf="tableOptConf"
      :btn-conf="tableBtnConf"
      class="myLayoutCenter"
      @optClick="myTableOptClick"
      @btnClick="myTableBtnClick"
      @currentChange="currentChange"
      @sizeChange="sizeChange"
    ></my-table>
    <!-- 新增 -->
    <add
      v-if="dialog.add"
      @closed="closed('add')"
      @success="success('add')"
    ></add>
    <!-- 修改 -->
    <modify
      v-if="dialog.modify"
      :row="activeRow"
      @closed="closed('modify')"
      @success="success('modify')"
    ></modify>
    <!-- 配置 -->
    <config
      v-if="dialog.config"
      :row="activeRow"
      @closed="closed('config')"
      @success="success('config')"
    ></config>
  </div>
</template>

<script>
import { delFormNullParam } from '../../components/common/common'
import Config from './config'
import Add from './add'
import Modify from './modify'
import MyTable from '@/components/base/myTable'
import MySearch from '@/components/base/mySearch'
import menu from '@/components/mixins/menu'

export default {
  name: 'Project',
  components: { Modify, Add, Config, MySearch, MyTable },
  mixins: [menu],
  layout: 'Admin',
  data() {
    return {
      searchModel: {
        name: null,
        description: null,
        createTimeFmts: null
      },
      searchConf: {
        labelSuffix: null,
        inline: true,
        labelWidth: '1px'
      },
      formItems: [
        {
          elFormItem: {
            prop: 'name',
            label: '',
            type: 'input',
            placeholder: '请输入项目名称'
          }
        },
        {
          elFormItem: {
            prop: 'description',
            label: '',
            type: 'input',
            placeholder: '请输入项目描述'
          }
        },
        {
          elFormItem: {
            prop: 'createTimeFmts',
            label: '',
            type: 'datetimerange',
            placeholder: '请选择创建时间'
          }
        }
      ],
      tableData: {},
      tableColumns: [
        { type: 'selection' },
        { label: '序号', type: 'index' },
        { prop: 'name', label: '项目名称' },
        { prop: 'description', label: '项目描述', showOverflowTooltip: true },
        { prop: 'config', label: '配置', showOverflowTooltip: true },
        { prop: 'createTime', label: '创建时间' },
        { prop: 'updateTime', label: '最后一次更新时间' }
      ],
      tableOptConf: {
        optShow: true,
        buttons: [
          { name: '修改' },
          { name: '删除' },
          { name: '配置' },
          { name: '数据库' }
        ]
      },
      tableBtnConf: {
        show: true,
        buttons: [{ name: '新增' }]
      },
      dialog: { add: false, modify: false, config: false },
      activeRow: {},
      page: {
        size: 10,
        current: 1
      }
    }
  },
  created() {
    this.mySearchBtnClick()
  },
  mounted() {},
  methods: {
    myTableBtnClick(btnItem) {
      if (btnItem.name === this.tableBtnConf.buttons[0].name) {
        this.dialog.add = true
      }
    },
    myTableOptClick(optItem, row) {
      try {
        this.activeRow = Object.assign({}, row)
        if (optItem.name === this.tableOptConf.buttons[0].name) {
          this.dialog.modify = true
        } else if (optItem.name === this.tableOptConf.buttons[1].name) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            await this.$axios.post('/project/delete', { id: row.id })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getInitData()
          })
        } else if (optItem.name === this.tableOptConf.buttons[2].name) {
          this.dialog.config = true
        } else if (optItem.name === this.tableOptConf.buttons[3].name) {
          this.$router.push({
            path: '/db/database',
            query: { projectName: row.name }
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
    async mySearchBtnClick(btnItem) {
      if (btnItem != null) {
        btnItem.loading = true
      }
      await this.getInitData(this.searchModel)
      if (btnItem != null) {
        btnItem.loading = false
      }
    },
    async getInitData(params) {
      try {
        if (params == null) {
          params = {}
        } else if (params.createTimeFmts != null) {
          params.startCreateTimeFmt = params.createTimeFmts[0]
          params.endCreateTimeFmt = params.createTimeFmts[1]
        }
        params = delFormNullParam(params)
        const data = await this.$axios.post(
          '/project/page?size=' +
            this.page.size +
            '&current=' +
            this.page.current,
          params
        )
        this.tableData = data.data
      } catch (e) {
        this.tableData = { records: [] }
        console.log(e)
      }
    },
    closed(flag) {
      if (flag != null) {
        this.dialog[flag] = false
      }
    },
    success(flag) {
      this.closed(flag)
      this.getInitData()
    },
    currentChange(current) {
      this.page.current = current
      this.getInitData()
    },
    sizeChange(size) {
      this.page.size = size
      this.getInitData()
    }
  }
}
</script>

<style scoped></style>
